<template>
  <div>
    <h1>增加员工</h1>
    <div  class="StaffAdd_div">
       <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
      <FormItem prop="Acc">
        <Input type="text" v-model="formInline.Acc" placeholder="账号：数字字母5到10个字符" style="width: 350px;" />
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        
      </FormItem>
      <br />
      <FormItem prop="password">
        <Input type="password" v-model="formInline.password" placeholder="密码：数字字母5到10个字符" style="width: 350px;" />
          <Icon type="ios-lock-outline" slot="prepend"></Icon>
        
      </FormItem>
      <br />
      <FormItem prop="UserName">
        <Input type="text" v-model="formInline.UserName" placeholder="名字：数字，字母，中文字到5到10个字符" style="width: 350px;" />
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        
      </FormItem>
      <br />
      <FormItem prop="position" >
        <Select v-model="formInline.position" style="width: 350px;"   >
          <Option   v-for="item in getposionidarr" :value="item.jid" :key="item.value">{{item.name}}</Option>
        </Select>
      </FormItem>
      <br />

        <FormItem>
          <Button type="primary"
                  @click="StaffAdd('formInline')"
                  class="AddBtn">点击添加</Button>
        </FormItem>
      </Form>

    </div>
  </div>
</template>
 
<script>
import { StaffAdd } from '../../../server/home.js'
import { Getposionid } from '../../../server/home.js'
export default {
  data() {
    return {
      getposionidarr: [],
      formInline: {
        Acc: '',
        password: '',
        UserName: '',
        position: '' //职位
      },
      ruleInline: {
        Acc: [
          { required: true, message: '输入的账号不能为空', trigger: 'blur' },
          {
            pattern: /^[A-z-0-9]{5,10}$/,
            message: '账号为5-10字母或数字',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '输入的密码不能为空', trigger: 'blur' },
          {
            pattern: /^[A-z-0-9]{5,10}$/,
            message: '密码为5-10字母或数字',
            trigger: 'blur'
          }
        ],
        UserName: [
          { required: true, message: '输入的名字不能为空', trigger: 'blur' },
          {
            pattern: /^[\u4e00-\u9fa5-A-z-0-9]{1,10}$/,
            message: '昵称为1-10字中文、字母或数字',
            trigger: 'blur'
          }
        ],
        position: [
          { required: true, message: '输入的职位不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    StaffAdd(name) {
      var Acc = this.formInline.Acc
      var Password = this.formInline.password
      var UserName = this.formInline.UserName
      var position = this.formInline.position

      var AccReg = /^[A-z-0-9]{5,10}$/
      var PasswordReg = /^[A-z-0-9]{5,10}$/
      var UserNameReg = /^[\u4e00-\u9fa5-A-z-0-9]{1,10}$/
      if (
        Acc.match(AccReg) == null ||
        Password.match(PasswordReg) == null ||
        UserName.match(UserNameReg) == null ||
        position == ''
      ) {
        this.$Message.error('您的输入内容有误')

      } else {
        var data = {
          Acc: this.formInline.Acc,
          password: this.formInline.password,
          UserName: this.formInline.UserName,
          position: this.formInline.position
        }

        StaffAdd(data).then(res => {
          alert(res.message)
        })
      }
    }
  },
  created(){
    Getposionid().then(res=>{


      this.getposionidarr =res.data;


    })
  }
}
</script>
<style scoped>
.StaffAdd_div {
  margin-left: 437px;
  margin-top: 5px;
}
.AddBtn {
  margin-left: 5px;
}
</style>